@def cmShadowColor #ee5500;
/***** shell **************/
.body {
	margin: 0;
	padding: 0;
}
.headerWrap {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #444444;
	color: #ffaa44;
}

.pageHeader {
	position: relative;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	background-color: #555555;
	min-height: 3.2em;
}
.pageHeader h1{
	margin: 0;
	padding: 0 25px;
}
.pageHeader h1 a{
	color: #ffaa44;
	text-decoration: none;
} 
.pageHeader,
.activityWrap{
	width: 1035px;
	margin: 0 auto !important;
}

h2{
	padding: 5px 15px;
	margin: 0;
	border-bottom: 3px solid #ee5500;
	background-color: #ccc;
}
/* Common column settings */
.activityPanel1,
.activityPanel2,
.activityPanel3{
	-moz-transition: all 1.0s ease-in;
	-webkit-transition: all 1.0s ease-in;
	position: relative;
	float: left;
	background-color: #eee;
}
/* 1Column settings */
.oneCol .activityPanel1 {
	width: 1035px;
	margin: 0 0 5px 0;
}
.oneCol .activityPanel2,
.oneCol .activityPanel3 {
	width: 0px;
}
/* 2 Column settings */
.twoCols .activityPanel1 {
	width:780px;
	margin: 0 5px 5px 0;
}
.twoCols .activityPanel2 {
	width: 245px;
	margin: 0 0 5px 5px;
}
.twoCols .activityPanel3 {
	width: 0px;
}
.twoCols .activityPanel3 button,
.oneCol .activityPanel2 button,
.oneCol .activityPanel3 button{
	display: none;
}
/** threeColsFixed **/
.threeColsFixed .activityPanel1,
.threeColsFixed .activityPanel2,
.threeColsFixed .activityPanel3{
	min-height: 400px;
}
.threeColsFixed .activityPanel1 {
	width:338px;
	margin: 0 5px 5px 0;
}
.threeColsFixed .activityPanel2 {
	width: 339px;
	margin: 0 5px 5px 5px;
}
.threeColsFixed .activityPanel3 {
	width: 338px;
	margin: 0 0 5px 5px;
}

/** Region */

.modulBlock{
	position: relative;
}
.editMode .modulBlock:HOVER{
	box-shadow: 0 0 15px cmShadowColor;
}
.editMode .buttonBar{
	visibility: visible;
}
/** Footer **/
.footerView{
	position: relative;
	clear: both;
	margin-top: 5px;
	padding: 5px;
	background-color: #333;
	color: #eee;
}

/** Activity styles **/
.floatLeft{
	float: left;
}

.floatRight{
	float: right;
}
.fixedSize{
	float: left;
	height: 400px;
	width: 340px;
}
.block{
}
/** Message **/
.hidden{display: none;}

/** Message */
.messageWrapper{min-height:30px;}
.message{border:1px solid #eee;min-height:30px; padding: 5px 5px 5px 5px;width: 98%}
.message .warntext{}
@sprite .message .errortext{gwt-image: "errorIcon";height:auto;width:auto;color: red;padding-left: 35px;}
@sprite .message .infotext{gwt-image: "infoIcon";height:auto;width:auto;padding-left: 35px;}
 
 
/** Core **/
.nav{
	float:left;
}
.editView{
	float: left;
	border-left: 1px solid #eee;
	padding: 0 10px;
}
@sprite .closeButton{
	gwt-image: "closeIcon";
	position: absolute;
	right: 10px;
	top: 7px;
	text-indent: -1000px;
	border: none;
	cursor: pointer;

}

@sprite .itemMenu{
	gwt-image: "itemMenuButton";
	text-indent: -1000px;
	border: none;
	cursor: pointer;
	float: right;
}

.inp label{
	display: inline-block;
	width: 80px;
}

.navSelectBox{
	border: 2px solid #ccc;
	display: inline-block;
}
.navSelectBox div{
	display: inline-block;
	min-width: 80px;
}
@sprite .selectButton{
	gwt-image: "itemMenuButton";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;
}
/** Admin panel **/
.adminPanel{
	position: absolute;
	top: 2px;
	left: 50%;
	margin-left: -602px;
}
@sprite .adminButton{
	gwt-image: "adminIcon";
	overflow: hidden;
	text-indent: -1000px;
	border: none;
	cursor: pointer;
	float: left;
	margin-right: 10px;
}
@sprite .editModeButtonOff{
	gwt-image: "adminEditModeButton";
	background-color: transparent;
	border-radius: 5px;
	float: left;
	cursor: pointer;
}

@sprite .editModeButtonOn{
	gwt-image: "adminEditModeButton";
	background-color: #aaa;
	border-radius: 5px;
	float: left;
}


/****** Box *********/
.box{
}
.boxhead{
	
}

.boxcontent{
}
.box2{
}

.box2Head{
	background-color: #ddd;
	margin: 0;
	padding: 3px;
}

.box2Content{
}

/** user block **/
.userBlock {
	padding-top: 2px;
	padding-right: 10px; 
}

.userBlock a {
	color: #ffaa44;
}

/*** Buttonbar **/
.buttonBar{
	position: absolute;
	top: 0px;
	right: -20px;
	z-index: 1;
	border: 1px solid #999;
	border-radius: 5px;
	background-color: #999;
	visibility: hidden;
}
.buttonBar button{
	border-radius: 5px;
}

@sprite .addButton{
	gwt-image: "addIcon";
	text-indent: -1000px;
	overflow: hidden;
	cursor: pointer;
	display: block;
	border: none;
}

@sprite .editButton{
	gwt-image: "editIcon";
	text-indent: -1000px;
	overflow: hidden;
	cursor: pointer;
	display: block;
	margin: 1px;
	border: none;
	background-color: #ccc;
}
@sprite .deleteButton{
	gwt-image: "removeIcon";
	text-indent: -1000px;
	overflow: hidden;
	cursor: pointer;
	display: block;
	border: none;
}

/** searchbutton */
@sprite .searchButton{
		gwt-image: "searchIcon";
		text-indent: -1000px;
		overflow: hidden;
		cursor: pointer;
		border: 1px solid transparent;
}
.searchButton:HOVER{
	border: 1px solid #999;
}

.searchOption{
	display: block;
}

/** save */
@sprite .saveButton{
		gwt-image: "saveIcon";
		text-indent: -1000px;
		overflow: hidden;
		cursor: pointer;
		border: 1px solid transparent;
}
.saveButton:HOVER{
	border: 1px solid #999;
}
@sprite .headerSaveButton{
		gwt-image: "headerSaveIcon";
		text-indent: -1000px;
		overflow: hidden;
		cursor: pointer;
		border: 1px solid transparent;
		float: right;
}
/** Back button */
@sprite .backButton{
	gwt-image: "backIcon";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;
	float: left;
}
/** Close button */
@sprite .closeButton{
	gwt-image: "closeIcon";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;
}
/** new button */
@sprite .newButton{
	gwt-image: "newIcon";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 5px;
	top: 2px;
}
/** Prev button */
@sprite .prevButton{
	gwt-image: "previusIcon";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;
}
/** Next button */
@sprite .nextButton{
	gwt-image: "nextIcon";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;
}

/** Dropdown menu button */
@sprite .dropDownMenuButton{
	gwt-image: "bulletArrowDown";
	text-indent: -1000px;
	overflow: hidden;
	border: none;
	cursor: pointer;	
	float: right;
}

/** Members and users */
.userEditBox .inp label{
	display: block;
	width: auto;
}
.memberImg{
	width: 150px;
}

/** Loading */
@sprite .loading{
	gwt-image: "loading";
	text-indent: -1000px;
	overflow: hidden;
}
.noDisplay{
	display: none;
}

/******* Nav ************/
@def navBorderColor #ccc;
.topNav{
	padding: 0;
	margin: 0;
   	border-left: 1px solid navBorderColor;
	border-right: 1px solid navBorderColor;
	float: left;
}

.topNavItem{
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
.topNavItemLink{
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	color: #fff;
	background-color: #444;
	text-decoration: none;
	display: block;
	width: 80px;
	text-align: center;
	vertical-align: bottom;
	padding: 12px 0 10px 0;
	margin: 0;
	font-size: 1em;		
	border-left: 1px solid navBorderColor;
	border-right: 1px solid navBorderColor;
}
.topNavItemLink:ACTIVE,.topNavItemLink:HOVER {
	background-color: #777;
	color: #121cd5;
}

.navItemSelected .topNavItemLink{
	background-color: #ccc;
	color: #3311ff;
	border-bottom: 1px solid navBorderColor;
	font-weight: bold;
}
/********* Article ****************/
.articleBox{
	min-height: 30px;
}

.articleEditMode{}

.articleEditBox{
	background-color: transparent;
	margin: 0;
	padding: 0;
	position: relative;
	border-radius: 5px;
}
.editMode .articleEditBox{
	background-color: #fff;
}
.editMode .articleEditBox:HOVER{
	box-shadow: 0 0 15px #ee5500;
}
.articleEditBox iframe{
	width: 100%;
	border: none;
}
.articleEditText{
	position: relative;
}
.articleButtonBar{
	visibility: hidden;
}

.editMode .articleEditBox .articleButtonBar{
	visibility: visible;
}
.articleEditText .articleEditButton{
	visibility: hidden;
}
/** editbutton */
@sprite .articleEditButton{
	gwt-image: "editIcon";
	text-indent: -1000px;
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	right: 2px;
	top: 2px;	
	width: 22px;
	height: 22px;
	background-color: #ffaa44;
	border: 2px solid #ffaa44;
}
.articleEditButton:HOVER{
	border: 2px solid #ee5500;
}

/***** Toolbar *********/
@sprite .boldOn, .boldOff{
	gwt-image: "bold";
	display: inline-block;
	overflow: hidden;
	text-indent: -1000;
	cursor: pointer;
}
.boldOn{
	border: 1px solid #999;
}
.boldOff{
	border: 1px solid transparent;
}

@sprite .italicOn, .italicOff{
	gwt-image: "italic";
	display: inline-block;
	overflow: hidden;
	text-indent: -1000;
	cursor: pointer;
}
.italicOn{
	border: 1px solid #999;
}
.italicOff{
	border: 1px solid transparent;
}

@sprite .underlineOn, .underlineOff{
	gwt-image: "underline";
	display: inline-block;
	overflow: hidden;
	text-indent: -1000;
	cursor: pointer;
}
.underlineOn{
	border: 1px solid #999;
}
.underlineOff{
	border: 1px solid transparent;
}


/********* news **************/
.newsCell{
	padding: 15px;
}
.newsTitle{
	font-size: 1.2em;
	font-weight: bold;
}

.newsMain{
	padding: 5px 0;
}

.newsInfo{
	color: #666;
}
/************** playlist ****************/
.playerPanel,
.playerPanelShowing{
	-moz-transition: all 1.0s ease-in;
	-webkit-transition: all 1.0s ease-in;
		height: 0px;
	overflow: hidden;
	visibility: hidden;
}
.playerPanelShowing{
	visibility:visible;
	height: 300px;
}

.player{
	display: inline-block;
	vertical-align: top;
}

.lyrics{
	display: inline-block;
	width: 611px;
	vertical-align: top;
	background-color: #fff;
}
.lyricsContent{
	height: 300px;
	overflow: auto;
}

.search{
	float: right;
}
/***************** Playlist edit *************/
 .inpBlock {
	min-height: 70px;
}

.songEditBox .inpBlock .inp {
	float: left;
	display: block;
	width: 120px;
	padding: 5px;
}
.inpBlock .inp input{
	width: 110px;
}
.inpBlock .inp label {
	display: block;
}

.songEditBox .inpBlock .keyTone{
	width: 2em;
}
.songEditBox .inpBlock .keyTone input{
	width: 2em;
}
.songEditBox .inpBlock .startingPlayer input{
	width: 60px;
}

.youtubedatabox {
	height: 170px;
	clear: both;
	padding: 5px;
}
.youtubedata {
	height: 170px;
	clear: both;
}
.playerBox{
	float: left;
	height: 380px;
	width: 425px;
	padding: 5px;
}
.lyricsBox{
	float: left;
	height: 380px;
	padding: 5px;
}
.lyrics{
	border: none;
}
.searchBt{
	float: right;
}
/**************** Youtube *******************/
.entryWrap{
	margin:0;
	padding: 0;
	height: 140px;
	width: 120px;
	position: relative;
	border: 6px solid #eee;
	display: inline-block;
	border-radius: 6px;
}

.entryWrap:HOVER{
	border: 6px solid #ccc;
	background-color: #eee"
}
.entryContent{
	margin-left:4px;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
}
.media{
	min-height: 90px;
	margin: 0;
	padding: 0;
	height: 90px;
	width: 120px;
	cursor: pointer;
}
.entryWrap .addButton{
	display: none;
	position: absolute;
	top: 1px;
	right: 2px;	
}
.entryWrap:HOVER .addButton{
	display: block;
}

.entryWrap .addButton:HOVER {
}

.entryWrap .deleteButton{
	position: absolute;
	display: none;
	top: -6px;
	right: -6px;
}
.entryWrap:HOVER .deleteButton{
	display: block;
}

.entryWrap .deleteButton:HOVER {
}

@sprite .dragHandle{
	gwt-image: "dragHandle";
	margin-top: -3px;
	visibility: hidden;
	display: block;
	text-indent: -1000px;
	overflow: hidden;
	background-color: #ccc;
	width: 100%;
	background-position: center;
}
.posistioner{
	width: 131px;
	height: 140px;
	display: inline-block;
	background-color: #fff;
}
 .entryWrap:HOVER .dragHandle{
 visibility: visible;
}
.entryDuration{
	position: absolute;
	top: 74px;
	right: 2px;	
	background-color: #000;
	color: #fff;
}
/**** Picasa ******/
.navBar{
	text-align: center;
}

.fullView{
	width: 995px;
}